<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../../../lib/bootstrap/3.3.5/css/bootstrap.min.css"/>
  <script src="../../../node_modules/vue/dist/vue.min.js"></script>
  <script src="../../../node_modules/jquery/dist/jquery.js"></script>
  <script src="../../../node_modules/vue-resource/dist/vue-resource.min.js"></script>
  <script src="../../../node_modules/vue-router/dist/vue-router.js"></script>
  <title>siteidt</title>
</head>
<body>
<div class="row-fluid">
  <div class="col-sm-12">
    <h3 class="page-header text-center">
      文件管理
    </h3>
  </div>
</div>
<div id="filelist" >


      <div class="col-sm-12">
        <div class="col-sm-3">
          <button class="btn btn-default" v-on:click="onRemoveSelected($event)">删除选中记录</button>
          <button class="btn btn-default" v-on:click="setMode('modeAddNew')">新增</button>
        </div>
        <!-- <form id="search"> -->
        <div class="col-sm-offset-3 col-sm-3">
          <input id="searchQuery" name="query" type="text" style="float:right" v-model="searchQuery" class="form-control" required />
        </div>
        <div class="col-sm-2">
          <button id='search' class="btn btn-outline btn-block btn-success save" v-on:click="basicsearch($event)"><strong>搜索</strong></button>
        </div>
        <div class="col-sm-1 text-left vertical-middle-sm">
          <h5><strong>
            <a role="button" class="control-label" data-toggle="collapse" href="#advancedsearch" aria-expanded="false" aria-controls="advancedsearch">高级...</a>
          </strong></h5>
        </div>
      </div>


    <div class="row">
      <div class="col-sm-12">
        <br/>
      </div>
    </div>

  <div class="row">
    <div class="collapse col-sm-12" id="advancedsearch">
      <div class="well">
        <div class="row">
          <!-- <form class="form-horizontal contract-form"> -->
          <div class="form-group">
            <label class="col-sm-1 control-label">Begin Time</label>
            <div class="col-sm-5">
              <input id="begintime" name="begintime" type="text" v-model="begintime" value="2015-01-01" class="form-control" required />
            </div>
            <label class="col-sm-1 control-label">End Time</label>
            <div class="col-sm-5">
              <input id="endtime" name="endtime" type="text" v-model="endtime" value="2015-02-01"
                     class="form-control" required />
            </div>
          </div>
          <div class="form-group">
            <label class="col-sm-1 control-label">Logger Id</label>
            <div class="col-sm-5">
              <input id="deviceid" name="deviceid" type="text" v-model="remotedevice" value="" class="form-control" required />
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-9 col-sm-1">
              <button class="btn btn-outline btn-block btn-warning">清除</button>
            </div>
            <div class="col-sm-2">
              <button id='submitbutton' class="btn btn-outline btn-block btn-success save" v-on="click:advancedsearch($event)">提交</button>
            </div>
          </div>
          <!-- </form> -->
        </div>
      </div>
    </div> <!-- advancedsearch -->
  </div>
  <table class="table table-bordered table-condensed table-striped table-hover">
    <thead>
    <tr>
      <th></th>
      <th >id</th>
      <th >category</th>
      <th >dataTimeStr</th>
      <th >suffix</th>
      <th >state</th>
      <th>oper</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="item in items">
      <td><input type="checkbox" v-model="item.selected"> </td>
      <td>{{item.shortname}}</td>
      <td><a href="/showdetails" >{{item.category}}</a>
        <ul class="media-list row contacts-container"></ul></td>
      <td>{{item.dataTimeStr}}</td>
      <td>{{item.suffix}}</td>
      <td>{{item.state}}</td>
      <td>
        <a href="#" v-on:click="onEdit">编辑</a>
      </td>
    </tr>
    </tbody>
  </table>


  <div class="col-sm-12">
    <datatable tabledef="{{tabledef}}"></datatable>
  </div>
</div>

<!--
    <div class="col-md-12">
        <div class="row">
        <div class="col-md-6">
            <label for="search-query"></label>
            <input type="text" id="search-query" v-model="searchQuery" class="form-control" placeholder="Search..." style="width: 200px">
        </div>
        <div class="col-md-6">
            <pagination id="my-table" class="pull-right"></pagination>
        </div>
        </div>
        <grid rows="{{gridData}}" columns="{{gridColumns}}" filter-key="{{searchQuery}}" per-page="5" id="my-table"></grid>
        <hr>
        <grid rows="{{gridData2}}" columns="{{gridColumns2}}" per-page="10" id="another-table"></grid>
        <pagination id="another-table"></pagination>
    </div>
    -->

</div>  <!-- object list view -->

<div id="objectviewer" class="row" v-show="mode=='modeItemView'">
  object viewer
</div>

<div id="objecteditor" v-show="mode=='modeAddNew'">
  <div class="row" >
    <itemeditor mode="{{mode}}" item="{{curitem}}" on-submit="{{onSave}}" on-cancel="{{onCancel}}"></itemeditor>
  </div>
</div>

<div id="objecteditor2" v-show="mode=='modeEdit'">
  <div class="row" >
    <itemeditor mode="{{mode}}" item="{{curitem}}" on-submit="{{onSave}}" on-cancel="{{onCancel}}"></itemeditor>
  </div>
</div>

<div class="row"><div class="col-sm-12"><hr /></div></div>

<div class="row"><div class="col-sm-12 text-center"><br/></div></div>

<modal show="{{@showModal}}">
  <div class="modal-header col-sm-12">
    <h3>请输入人员信息</h3>
  </div>
  <div class="modal-body col-sm-12">
    <div class="row" >
      <itemeditor mode="{{mode}}" item="{{curitem}}"></itemeditor>
    </div>
  </div>
</modal>

</div>


  <template id="itemeditor-tpl">
    <div class="col-sm-12">
      <!-- <form class="form-horizontal"> -->
      <div class="form-horizontal">
        <!--
              <div class="form-group">
                  <div class="col-sm-offset-9 col-sm-1 ">
                      <button type="submit" class="btn-block btn btn-default" v-on="click:setMode('modeList')">Cancel</button>
                  </div>
                  <div class="col-sm-2">
                      <button type="submit" class="btn-block btn btn-default pull-right" v-on="click:onAddNew($event)">Submit</button>
                  </div>
              </div>
              -->
        <div class="site-bgcolor">
          <hr />
          <div class="form-group">
            <label for="id" class="col-sm-2 control-label">Id</label>
            <div class="col-sm-4">
              <input class="form-control" id="id" readonly="readonly" v-model="item.id">
            </div>
            <label for="id" class="col-sm-1 control-label">Id</label>
            <div class="col-sm-4">
              <input class="form-control" id="id" readonly="readonly">
            </div>
            <!--
                    <div class="form-right-col">
                        <img height="300" src="image/to_be_added.jpg"/>
                        <label>Notes:</label>
                        <textarea id="description" name="description">description text here</textarea>
                    </div>
                    -->
          </div>
          <div class="form-group">
            <label for="name" class="col-sm-2 control-label" >Name</label>
            <div class="col-sm-4">
              <input class="form-control" id="name" placeholder="First Name" v-model = "item.firstname" />
              <input class="form-control" id="name" placeholder="Middle Name" v-model = "item.midname"/>
              <input class="form-control" id="name" placeholder="Last Name" v-model="item.lastname" />
            </div>
            <label for="name" class="col-sm-1 control-label">Gender</label>
            <!--
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" v-model="item.gender"> Male
                        </label>
                    </div>
                    -->
          </div>
          <div class="form-group">
            <label for="inputEmail" class="col-sm-2 control-label">Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="inputEmail" placeholder="Email" v-model="item.email">
            </div>
            <label for="inputEmail" class="col-sm-1 control-label">Email</label>
            <div class="col-sm-4">
              <input type="email" class="form-control" id="inputEmail" placeholder="Email">
            </div>
          </div>
          <div class="form-group">
            <label for="mobilephone" class="col-sm-2 control-label">MobilePhone</label>
            <div class="col-sm-4">
              <input class="form-control" id="mobilePhone" placeholder="MobilePhone" v-model="item.mobilephone">
            </div>
            <label for="mobilephone" class="col-sm-1 control-label">MobilePhone</label>
            <div class="col-sm-4">
              <input class="form-control" id="mobilePhone" placeholder="MobilePhone">
            </div>
          </div>
          <div class="form-group">
            <label for="identitycard" class="col-sm-2 control-label">IdentityCard</label>
            <div class="col-sm-4">
              <input class="form-control" id="identityCard" placeholder="IdentityCard">
            </div>
            <label for="identitycard" class="col-sm-1 control-label">IdentityCard</label>
            <div class="col-sm-4">
              <input class="form-control" id="identityCard" placeholder="IdentityCard">
            </div>
          </div>
          <div class="form-group">
            <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
            <div class="col-sm-9">
              <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-offset-2 col-sm-10">
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Remember me
                </label>
              </div>
            </div>
          </div>
          <hr />
        </div>

        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button class="btn btn-default" v-on:click="onCancelClick($event)">取消</button>
            <!--
                      <button type="submit" class="btn btn-default" v-on="click:onAddNew($event)">Submit</button>
                      -->
            <button class="btn btn-default" v-on:click="onSubmitClick($event)">提交</button>
          </div>
        </div>
      </div>
      <!-- </form> -->
      <!--
          <pre>
              <div>{{ $data | json }}</div>
          </pre>
          -->
    </div>
  </template>


</div>

<script src="sedt.js"></script>
</body>
</html>
